<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
1. onclick: 鼠标单击事件
2. onfocus： 获得焦点事件； 当点击了输入框后，输入框就获得了焦点。
3. onblur: 失去焦点事件； 当点击了输入框后，输入框就获得了焦点；再点击页面其他位置，那输入框就失去焦点了。
4. onload: 某个页面或图像被完成加载
5. onsubmit: 表单提交事件
6. onmouseout: 鼠标移出事件。
7. onmouseover: 鼠标移入事件。

注意：
1. 直接在 onfocus等 属性中写入 JavaScript 表达式
    <input type="text" onfocus="this.style.backgroundColor = 'yellow';">
2. 使用函数名调用外部函数
    <input type="text" onfocus="changeColor(this)">
    <script>
    function changeColor(element) {
        element.style.backgroundColor = 'yellow';
    }
    </script>
3. 使用匿名函数，不太常见
-->

<!-- 4.onload页面加载完成时间-->
<body onload="onloadEvent()">


<!--1.onclick 单击事件-->
<input type="button" onclick="clickEvent()" value="单击事件方式一">
<input type="button" id = "b1" value = "单击事件">
<button onclick="alert('点击事件')">单击事件方式二</button>
<button onclick="clickEvent()">单击事件方式三</button>
<br><br>

<!--2.onfocus获得焦点事件-->
<input type="text" placeholder="请输入单词" onfocus="playVoice()">

<!--3.onblur失去焦点事件-->
<input type="text" onfocus="this.style.backgroundColor = 'yellow';" onblur="this.style.backgroundColor='white';" placeholder="点击此处获取焦点">


<!--5. onsubmit表单提交事件-->
<!-- true会继续提交，false不会提交-->
<form onsubmit="return validateForm()">
    <input type="text" id="username" placeholder="请输入用户名">
    <input type="submit" value="提交">
</form>

<!--6. onmouseout 鼠标移出事件-->
<div onmouseout="this.style.color = 'black';" onmouseover="this.style.color = 'red';">
    将鼠标移入和移出此文本
</div>

<div onmouseout="playVoice()">
    将鼠标移入和移出此文本
</div>

<!--7. onmouseover：鼠标移入事件-->
<button onmouseover="this.style.backgroundColor = 'lightblue';" onmouseout="this.style.backgroundColor = '';">
    将鼠标移到此按钮上
</button>
<br>
<button onmouseover="playVoice()">
    将鼠标移到此按钮上
</button>


<script>
    // 1. onclick: 鼠标单击事件
    function clickEvent(){
        alert("点击事件")
    }
    document.getElementById("b1").onclick = function (){
        alert("hh")
    }

    // 2. onfocus： 获得焦点事件； 当点击了输入框后，输入框就获得了焦点。
    function playVoice(){
        let url = "https://dict.youdao.com/dictvoice?type=1&audio=tutorial";
        let audio = new Audio(url);
        audio.play().catch(error=> {
            console.error("播放音频时遇到问题：", error);
        })
    }

    // 3. onblur: 失去焦点事件； 当点击了输入框后，输入框就获得了焦点；再点击页面其他位置，那输入框就失去焦点了。


    // 4. onload: 某个页面或图像被完成加载
    function onloadEvent(){
        alert("欢迎来到我的页面")
    }

    // 5. onsubmit: 表单提交事件
    function validateForm() {
        const username = document.getElementById("username").value;
        if (username === "") {
            alert("用户名不能为空！");
            return false;
        }
        alert("表单提交成功！");
        return true;
    }

    // 6. onmouseout: 鼠标移出事件。见上面


    // 7. onmouseover: 鼠标移入事件。见上面






</script>

</body>
</html>